<template>
  <div class="order-detail-container">
    <!-- 导航栏 -->
    <van-nav-bar
      title="订单详情"
      left-text="返回"
      :right-text="statusText"
      left-arrow
      fixed
      @click-left="goBack"
    />
    <!-- 订单信息 -->
    <p class="title first-title">订单信息</p>
    <div class="order-info">
      <van-cell-group>
        <van-cell title="订单号" :value="sn" title-style="font-size:15px" />
        <van-cell title="下单时间" :value="orderData.create_at" title-style="font-size:15px" />
      </van-cell-group>
    </div>
    <!-- 订单明细 -->
    <p class="title">订单明细</p>
    <div class="order-detail">
      <div class="order-item" v-for="(item, index) in orderData.items" :key="index">
        <p class="item-title">商品{{ index + 1 }}</p>
        <div class="main-content">
          <div class="left">
            <img width="120" height="120" :src="item.flash_img" />
          </div>
          <div class="right">
            <p class="title">{{ item.flash_name }}</p>
            <p>数量:{{ item.count }} 价格:￥{{ item.flash_price }}</p>
            <p>出行时间:{{ orderData.play_date }}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 订单总计 -->
    <p class="title">订单总计</p>
    <div class="order-cal-container">
      <p>总共{{ goodsCount }}件商品 合计￥{{ countPrice }}</p>
      <p>
        <van-button
          type="warning"
          round
          v-if="orderData.status === 2 || orderData.status === 3"
          @click="delOrder"
          >删除订单</van-button
        >
        <!-- TODO 存在多个订单项时订单总价前端这里计算出来了，
         但是由于提交订单的时候只能提交单个订单，后端接口没有实现提交订单时计算该订单的全部订单项总价，
         现在传门票id过去后从数据库读取的是前端操作提交订单时的价格 -->
        <!-- 实际价格还是在后端计算的，暂无法把前端计算的价格写入数据库，暂时只能把计算的结果传到支付页面显示 -->
        <!-- 临时解决方案（不安全），传查询参数，pay页面的created方法读取查询参数 -->
        <van-button
          type="warning"
          round
          v-else-if="orderData.status === 1"
          :to="{
            name: 'orderPayPage',
            params: { sn: this.sn },
            query: { finalPrice: this.countPrice }
          }"
          >去支付</van-button
        >
      </p>
    </div>
  </div>
</template>

<script>
import { ajax } from '@/utils/ajax'
import { OrderApis } from '@/utils/apis'
import { ORDER_STATUS } from '@/utils/constants'
import { showConfirmDialog, showNotify } from 'vant'

export default {
  data() {
    return {
      // 导航栏右侧的状态文字
      statusText: '',
      sn: '',
      orderData: []
    }
  },
  computed: {
    // 计算总价
    countPrice() {
      // 遍历订单项并将订单项总价相加
      return this.orderData.items.reduce((total, item) => {
        // 对每个 item 计算 count * price 并累加到 total 上
        return total + item.flash_price * item.count
      }, 0)
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    // 获取订单数据
    getOrderData() {
      ajax.get(`${OrderApis.orderDetailUrl}/${this.sn}`).then(({ data }) => {
        console.log('orderData', data)
        this.orderData = data
        // 设置导航栏右侧的状态文字
        this.statusText = ORDER_STATUS[data.status]
        this.goodsCount = data.items.length
      })
    },
    // 删除订单.
    delOrder() {
      showConfirmDialog({
        title: '提示',
        message: '确定删除订单吗'
      })
        // 点击确认
        .then(() => {
          ajax.delete(`${OrderApis.orderDetailUrl}/${this.sn}`).then((res) => {
            console.log('delRes', res)
            if (res.status === 201) {
              showNotify({ type: 'success', message: '订单已删除' })
              // 跳转到订单列表
              this.$router.replace({ name: 'mineOrderPage', params: { tabId: 0 } })
              this.order.sn = ''
            } else if (res.status === 200) {
              showNotify({ type: 'success', message: '请勿重复删除' })
            }
          })
        })
        .catch(() => {
          // on cancel
        })
    }
  },
  created() {
    // 获取订单id
    this.sn = this.$route.params.sn
    // 获取订单数据
    this.getOrderData()
  }
}
</script>

<style lang="less" scoped>
.order-detail-container {
  // 订单信息
  .title {
    padding: 10px;
    margin: 0;
  }
  .first-title {
    margin-top: 46px;
  }
  .order-info {
    font-size: 16px;
  }
  //   订单明细
  .order-detail {
    background-color: #fff;
    .item-title {
      margin: 0;
      padding: 10px;

      font-size: 15px;
    }
    .main-content {
      display: flex;
      flex-direction: row;
      padding: 0 10px;

      .img {
        width: 130px;
      }
      .right {
        padding: 0 10px;

        text-align: left;
        .title {
          padding: 4px 0;
          font-size: 18px;
        }
      }

      p,
      h3 {
        margin: 0;
      }
    }
  }
  //   订单总计
  .order-cal-container {
    padding: 10px;
    background-color: #fff;
    p {
      text-align: right;

      margin: 6px 0;
    }
  }
}
</style>